<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    html,body{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #app{
        flex: 0 0 400px;
        width: 30%;
        height: 30%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 10px grey;
    }
    #app div{
        flex: 2;
        width: 80%;
        vertical-align: middle;
        text-align: center;
    }
    #app div .text{
        width: 100%;
        height: 40%;
        padding-left: 10px;
        margin-top: 5px;
        border-radius: 5px;
    }
    #app div .ra{
        width: 20%;
        height: 40%;
        font-size: 20px;
        vertical-align: middle;
    }
    #app #f{
        flex: 1;
        line-height: 30px;
    }
    #app button{
        width: 50%;
        height: 40%;
        margin-top: 5px;
        margin-bottom: 5px;
        background-color: #FF4500;
        color: #FFFFFF;
        border: 1px solid;
        border-radius: 5px;
    }
</style>
<script src="js/vue.js"></script>
<body>
    <div id="app">
        <div id="e">
            <input type="text" class="text" id="num1" name="num1" v-model.number="num1" placeholder="请输入第一个数字"><br>
            <input type="text" class="text" id="num2" name="num2" v-model.number="num2" placeholder="请输入第二个数字">
        </div>
        <div id="f">
            +<input type="radio" v-model="oper" class="ra" id="add" name="oper" value="1">
            -<input type="radio" v-model="oper" class="ra" id="sub" name="oper" value="2">
            *<input type="radio" v-model="oper" class="ra" id="mul" name="oper" value="3">
            /<input type="radio" v-model="oper" class="ra" id="dis" name="oper" value="4">
        </div>
        <div id="g">
            <button id="opera" @click="operation">计算</button><br>
            <div class="text" id="result">计算结果为：{{sum}}</div>
        </div>
    </div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            num1:'' ,
            num2:'',
            oper:'',
            sum:'',
        },
        methods:{
            operation:function () {
                let oper = this.oper;
                let num1 = this.num1;
                let num2 = this.num2;
                let s = 0;
                if(oper==1){
                    s = num1 + num2;
                }else if(oper==2){
                    s = num1 - num2;
                }else if(oper==3){
                    s = num1 * num2;
                }else if(oper==4 && num1!=0){
                    s = num1 / num2;
                }else{
                    s = 'error';
                }
                this.sum = s;
            },
        }
    });
</script>
</html>